import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Button, Input, InputNumber, message, Space} from "antd";
import TheButton from "@/components/TheButton";

class EditInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
            flag: false,
            min: props.min?? 0,
            max: props.max?? Number.MAX_SAFE_INTEGER,
            precision: props.precision ?? 0,
            tempValue: null,
            status: null,
            type: props.type?? 'default'
        }
    }

    componentDidMount() {
        message.config({
            maxCount: 1,
        });
        // 点击当前组件以外的地方（或者点击空白区域），当前组件隐藏的实现方案
        document.body.addEventListener( 'click', this.handleClickOutside);
    }
    componentWillUnmount(){
        // 在组件卸载时移除事件监听器
        document.body.removeEventListener('click',this.handleClickOutside)
    }
    handleClickOutside = (e) => {

        let cDom = this.editRef;
        let tDom = e.target;

        if (cDom !== null){
            if (cDom !== tDom && !cDom.contains(tDom)) {
                this.cancel()
            }
        }
    }

    edit = (v) => {
        let { type } = this.state;
        this.setState({
            flag: true,
            tempValue: type === 'price' ? React.$transNum(v, 2, -2): v
        })
    }
    cancel = () => {
        this.setState({
            flag: false,
            status: null
        })
    }
    save = () => {
        let { tempValue,min,max,type } = this.state;
        if (tempValue === null){
            this.setState({
                status: 'error'
            })
        }
        else if (tempValue < min || tempValue > max){
            message.warning(`只能输入${min}-${max}的数字`)
        }
        else if (this.hasMethod(this.props,'onSave')){
            if (type === 'price'){
                tempValue = React.$transNum(tempValue,0,2)
            }
            this.props.onSave(tempValue).then(res=>{
                if (res){
                    this.setState({
                        value: tempValue,
                        flag: false
                    })
                }
            })
        }
    }
    hasMethod = (obj, methodName) =>{
        return typeof obj[methodName] === 'function';
    }
    onChange = (v) => {
        this.setState({
            tempValue: v,
            status: v === null ? 'error' : null
        })
    }
    render() {
        let { value, tempValue, flag, min, max, precision, status ,type} = this.state;
        let { defaultValue, addonAfter,haspermi} = this.props;
        return (
            <div ref={ref=>this.editRef = ref}  style={{lineHeight: '34px'}}>
                {
                    flag ? <Space>
                        <InputNumber
                            // max={max}
                            // min={min}
                            value={tempValue}
                            placeholder={'此项为必填项'}
                            status={status}
                            precision={precision}
                            onChange={(v)=>this.onChange(v)}
                        />
                        <TheButton type={'link'} onClick={()=>this.cancel()}>取消</TheButton>
                        <TheButton type={'link'} onClick={()=>this.save()}>保存</TheButton>
                    </Space> : <Space>
                        <div >
                            {
                                type === 'price' ? <React.$Price price={value??defaultValue}/> : value??defaultValue
                            }
                            {
                                addonAfter
                            }
                        </div>
                        <TheButton haspermi={haspermi} type={'link'} onClick={()=>this.edit(value??defaultValue)}>修改</TheButton>
                    </Space>
                }
            </div>
        );
    }
}

EditInput.propTypes = {};

export default EditInput;
